import React, { useState } from 'react';
import { Card, Descriptions, Button, Table, Space, Tag, Modal, Form, Input, Select, Radio } from 'antd';
import { ArrowLeftOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';
import './styles.css';

interface DictionaryItemData {
  id: string;
  itemCode: string;
  itemName: string;
  itemValue: string;
  sortOrder: number;
  status: string;
  description?: string;
}

interface DictionaryDetailData {
  id: string;
  dictCode: string;
  dictName: string;
  category: string;
  status: string;
  description: string;
  createTime: string;
  updateTime: string;
  items: DictionaryItemData[];
}

// 模拟数据
const mockDetail: DictionaryDetailData = {
  id: 'DICT001',
  dictCode: 'RESOURCE_TYPE',
  dictName: '数据资源类型',
  category: '基础字典',
  status: 'enabled',
  description: '定义数据资源的类型分类',
  createTime: '2023-12-15 14:30:00',
  updateTime: '2023-12-15 14:30:00',
  items: [
    {
      id: 'ITEM001',
      itemCode: 'STRUCTURED',
      itemName: '结构化数据',
      itemValue: '1',
      sortOrder: 1,
      status: 'enabled',
      description: '结构化的数据资源'
    },
    {
      id: 'ITEM002',
      itemCode: 'UNSTRUCTURED',
      itemName: '非结构化数据',
      itemValue: '2',
      sortOrder: 2,
      status: 'enabled',
      description: '非结构化的数据资源'
    },
    {
      id: 'ITEM003',
      itemCode: 'SEMI_STRUCTURED',
      itemName: '半结构化数据',
      itemValue: '3',
      sortOrder: 3,
      status: 'enabled',
      description: '半结构化的数据资源'
    }
  ]
};

const DictionaryDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [detail] = useState(mockDetail);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [editingItem, setEditingItem] = useState<DictionaryItemData | null>(null);

  const handleBack = () => {
    navigate(-1);
  };

  const handleAddItem = () => {
    setEditingItem(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEditItem = (record: DictionaryItemData) => {
    setEditingItem(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDeleteItem = (record: DictionaryItemData) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除字典项"${record.itemName}"吗？`,
      onOk() {
        console.log('删除字典项:', record);
      }
    });
  };

  const handleModalOk = () => {
    form.validateFields().then(values => {
      console.log('保存字典项:', values);
      setIsModalVisible(false);
    });
  };

  const columns = [
    {
      title: '字典项编码',
      dataIndex: 'itemCode',
      key: 'itemCode',
      width: 150
    },
    {
      title: '字典项名称',
      dataIndex: 'itemName',
      key: 'itemName',
      width: 150
    },
    {
      title: '字典项值',
      dataIndex: 'itemValue',
      key: 'itemValue',
      width: 120
    },
    {
      title: '排序',
      dataIndex: 'sortOrder',
      key: 'sortOrder',
      width: 80
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => (
        <Tag color={status === 'enabled' ? 'success' : 'default'}>
          {status === 'enabled' ? '启用' : '停用'}
        </Tag>
      )
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 200
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_: any, record: DictionaryItemData) => (
        <Space size="middle">
          <a onClick={() => handleEditItem(record)}>
            <EditOutlined /> 编辑
          </a>
          <a onClick={() => handleDeleteItem(record)} style={{ color: '#ff4d4f' }}>
            <DeleteOutlined /> 删除
          </a>
        </Space>
      )
    }
  ];

  return (
    <div className="dictionary-detail-container">
      <Card
        title={
          <Space>
            <Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
              返回
            </Button>
            <span>字典详情</span>
          </Space>
        }
        className="detail-card"
      >
        {/* 基本信息 */}
        <Descriptions title="基本信息" bordered>
          <Descriptions.Item label="字典编码">{detail.dictCode}</Descriptions.Item>
          <Descriptions.Item label="字典名称">{detail.dictName}</Descriptions.Item>
          <Descriptions.Item label="字典分类">{detail.category}</Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={detail.status === 'enabled' ? 'success' : 'default'}>
              {detail.status === 'enabled' ? '启用' : '停用'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
          <Descriptions.Item label="更新时间">{detail.updateTime}</Descriptions.Item>
          <Descriptions.Item label="描述" span={3}>
            {detail.description}
          </Descriptions.Item>
        </Descriptions>

        {/* 字典项列表 */}
        <Card
          title="字典项列表"
          className="items-card"
          extra={
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAddItem}>
              新增字典项
            </Button>
          }
        >
          <Table
            columns={columns}
            dataSource={detail.items}
            rowKey="id"
            pagination={false}
          />
        </Card>
      </Card>

      {/* 字典项编辑弹窗 */}
      <Modal
        title={editingItem ? '编辑字典项' : '新增字典项'}
        open={isModalVisible}
        onOk={handleModalOk}
        onCancel={() => setIsModalVisible(false)}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="itemCode"
            label="字典项编码"
            rules={[{ required: true, message: '请输入字典项编码' }]}
          >
            <Input placeholder="请输入字典项编码" />
          </Form.Item>
          <Form.Item
            name="itemName"
            label="字典项名称"
            rules={[{ required: true, message: '请输入字典项名称' }]}
          >
            <Input placeholder="请输入字典项名称" />
          </Form.Item>
          <Form.Item
            name="itemValue"
            label="字典项值"
            rules={[{ required: true, message: '请输入字典项值' }]}
          >
            <Input placeholder="请输入字典项值" />
          </Form.Item>
          <Form.Item
            name="sortOrder"
            label="排序"
            rules={[{ required: true, message: '请输入排序值' }]}
          >
            <Input type="number" placeholder="请输入排序值" />
          </Form.Item>
          <Form.Item
            name="status"
            label="状态"
            initialValue="enabled"
          >
            <Radio.Group>
              <Radio value="enabled">启用</Radio>
              <Radio value="disabled">停用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="description"
            label="描述"
          >
            <Input.TextArea rows={4} placeholder="请输入描述" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default DictionaryDetail; 